Angular-এ চাইল্ড রাউটস একটি শক্তিশালী রাউটিং কনফিগারেশন যা একটি রুটের (প্যারেন্ট রুট) অধীনে সাব-রুট (চাইল্ড রুট) তৈরি করতে সাহায্য করে। এটি Nested Routing বা Nested Views তৈরি করার একটি উপায়, যার মাধ্যমে আপনি একটি পেজের মধ্যে একাধিক ভিউ লোড করতে পারেন।
এটি বিশেষত তখন ব্যবহৃত হয় যখন আপনাকে একাধিক কম্পোনেন্ট একে অপরের মধ্যে লোড করতে হয়, এবং একে অপরের সাথে সম্পর্কিত কনটেন্ট শো করতে হয়।
চাইল্ড রাউটস হলো মূল রুটের অধীনে সাব-রুটের সংজ্ঞা, যেগুলিকে মূল রুটের ভিউতে নেস্টেড (nested) হিসেবে দেখানো হয়। চাইল্ড রাউটস ব্যবহারের মাধ্যমে আপনি একটি কম্পোনেন্টের মধ্যে আরও অনেক কম্পোনেন্ট লোড করতে পারবেন, যেমন ড্যাশবোর্ডে বিভিন্ন সেকশন (Overview, Reports, Settings) থাকতে পারে, যেগুলোর প্রতিটির জন্য আলাদা রাউট কনফিগারেশন থাকবে।
চাইল্ড রাউটস তৈরি করতে হলে, প্রথমে আপনাকে প্যারেন্ট রাউট তৈরি করতে হবে এবং তারপরে সেটির অধীনে চাইল্ড রাউটস কনফিগার করতে হবে। উদাহরণস্বরূপ:
ধরা যাক, আমাদের একটি ড্যাশবোর্ড পেজ রয়েছে এবং তার অধীনে বিভিন্ন চাইল্ড রাউটস রয়েছে, যেমন "Overview", "Reports", এবং "Settings"।
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { OverviewComponent } from './dashboard/overview/overview.component';
import { ReportsComponent } from './dashboard/reports/reports.component';
import { SettingsComponent } from './dashboard/settings/settings.component';
const routes: Routes = [
{
path: 'dashboard', component: DashboardComponent, children: [
{ path: '', component: OverviewComponent }, // Default child route
{ path: 'overview', component: OverviewComponent },
{ path: 'reports', component: ReportsComponent },
{ path: 'settings', component: SettingsComponent }
]
},
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
এখানে:
/dashboard/overview এর জন্য OverviewComponent/dashboard/reports এর জন্য ReportsComponent/dashboard/settings এর জন্য SettingsComponentপ্যারেন্ট কম্পোনেন্টে router-outlet ব্যবহার করতে হবে যেখানে চাইল্ড কম্পোনেন্টগুলো লোড হবে।
<!-- dashboard.component.html -->
<h2>Welcome to the Dashboard!</h2>
<nav>
<a routerLink="overview">Overview</a>
<a routerLink="reports">Reports</a>
<a routerLink="settings">Settings</a>
</nav>
<router-outlet></router-outlet>
এখানে, routerLink এর মাধ্যমে চাইল্ড রাউটসের মধ্যে নেভিগেট করা হচ্ছে এবং router-outlet এর মাধ্যমে সেই কম্পোনেন্টটি রেন্ডার হবে।
এখানে আরও একটি উদাহরণ দেওয়া হলো যেখানে, একটি প্যারেন্ট কম্পোনেন্ট ProductComponent এবং তার অধীনে কয়েকটি চাইল্ড রাউট রয়েছে, যেমন "Product List", "Product Detail" ইত্যাদি।
const routes: Routes = [
{
path: 'products', component: ProductComponent, children: [
{ path: '', component: ProductListComponent }, // Default route
{ path: 'list', component: ProductListComponent },
{ path: 'detail/:id', component: ProductDetailComponent }
]
}
];
এখানে ProductComponent প্যারেন্ট কম্পোনেন্ট হিসেবে কাজ করবে এবং তার অধীনে ProductListComponent এবং ProductDetailComponent চাইল্ড রাউট হিসেবে কনফিগার করা হয়েছে।
চাইল্ড রাউটসেও আপনি ডাইনামিক প্যারামিটার ব্যবহার করতে পারেন, যেমন :id এর মাধ্যমে একটি নির্দিষ্ট প্রোডাক্টের ডিটেইলস দেখানো যেতে পারে।
{ path: 'detail/:id', component: ProductDetailComponent }
এটি ProductDetailComponent কে id প্যারামিটার গ্রহণ করার অনুমতি দেয়, এবং সেই প্যারামিটার ব্যবহার করে উপযুক্ত ডেটা লোড করা সম্ভব হয়।
Angular-এ চাইল্ড রাউটস ব্যবহারের মাধ্যমে আপনি একটি প্যারেন্ট রুটের অধীনে একাধিক সাব-রুট (চাইল্ড রুট) কনফিগার করতে পারেন। এটি nested views তৈরি করতে সাহায্য করে এবং অ্যাপ্লিকেশনের রাউটিং কাঠামোকে আরও মডুলার এবং স্কেলেবল করে তোলে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
